<template>
  <div>
    <v-header :title="$route.query.type + '列表'">
      <v-back></v-back>
    </v-header>
    <van-search
      v-model="value"
      shape="square"
      background="#FF6347"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <van-tabs v-model="active">
      <van-tab title="综合排序">
        <main>
          <van-empty v-if="!list" description="抱歉，没有找到相关内容" />
          <div class="goods" v-for="item in list" :key="item.id" @click="todetail(item.id,item.goodsname)">
            <van-image
              width="1rem"
              height="1rem"
              fit="contain"
              :src="'http://localhost:3000'+item.img"
            />
            <div>
              <p class="goods_title">{{item.goodsname}}</p>
              <p class="now_price">现价格：￥{{item.price}}<del>原价格：{{item.market_price}}￥</del></p>
              <p class="date">双11.11限制</p>
              <p class="comment">3565评论 <span>99%好评</span></p>
            </div>
          </div>
        </main>
      </van-tab>
      <van-tab title="销量"></van-tab>
      <van-tab title="价格"></van-tab>
      <van-tab title="好评度"></van-tab>
      <van-tab title="店铺"></van-tab>
      <van-tab title="筛选"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCateList } from "@/request/api.js";
export default {
  data() {
    return {
      list: [],
      value: "",
      active: 0,
    };
  },
  methods:{
    onSearch(info){
      this.$router.push('/search?keyword='+info)
    },
    todetail(id,name){
      this.$router.push('/detail/'+id+'/'+name)
    }
  },
  async created() {
    let cateid = this.$route.query.cateid;
    let reslist = await getCateList({ cateid });
    this.list=reslist.data.list.goodData
  },
};
</script>

<style scoped>
.goods {
  margin: 0.1rem auto;
  width: 85%;
  padding: 0.1rem;
  display: flex;
  justify-content: space-evenly;
}
.goods div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goods div .goods_title {
  font-size: 0.14rem;
}
.goods div .now_price {
  color: red;
  font-size: 0.14rem;
}
.goods div .now_price del{
  color: #ccc;
  margin-left: .05rem;
}
main{
  background-color: #fff;
  overflow: hidden;
}
.date{
  font-size: .14rem;
  background-color: rgb(255,99,71);
  width: .9rem;
  color: #fff;
  text-align: center;
}
.comment{
  font-size: .14rem;
  color: #ccc;
}
</style>